iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

追求JS小姊姊30天系列 第 9

追求JS小姊姊系列 Day9 -- 如果時間能重來,我不想跟工具人聊天(上)

  • 分享至 

  • xImage
  •  

前情提要

上一集讓人等到很崩潰的,終於..鄭列終於吹噓完了

阿物件:我跟你說...
:... (接下來難道要換阿物件吹噓了嗎?...要是時間能重來就好了)
????讓我來幫你吧?告訴我,你想去的時間吧
:(...?雖然不知道是誰)我想回到8月16號,這樣就有一個月可以準備鐵人了
我想回到中秋節9月21日前追蹤JS姐妹們的那天!!
????:交給我吧,建構新的時間


getFullYear() 延伸問題:Y2K背後的問題是?(更新時間:9/24 ,15:35

let goBackTime = new Date();

叫我Date或D特都可以

D特:就叫我D特吧,我的替身能力是Date
:...時間管理大師是你?
D特:並沒有,我的這個Date的能力還是有限制的,讓我稍微跟你講講吧:

  1. Date的時間是基於世界標準時間(UTC),最早只能回溯到1970 年 1 月 1 日(但跟UNIX epoch計算方不同,UNIX的計算單位只到秒(s),而Date則是到毫秒(millisecond))
  2. 存儲的時間單位為毫秒 timestamp(備註:一天為86,400,000毫秒)

開始找出時間前 --- 所以現在時間是?

let rightNow =Date();
let newRightNow = new Date();
console.log(rightNow,newRightNow);

這樣差在哪?新跟舊的差別

  1. 若沒有建構式new,輸出的時間為String型別的時間內容
  2. 若有建構式new,輸出的則為object

開始找出每個時間吧

D特:試圖回溯時間是不容易的事情,你需要知道並取得以下時間碎片,我會幫你依序取得它們,那些碎片分別是:

  1. 年份
  2. 月份
  3. 日期
  4. 小時
  5. 分鐘
  6. 秒數

將這些時間碎片拼湊後,才有可能正確地回到你的時間點

:2021年9月21號星期二的早上10點38分54秒。

const wantToGoDay = new Date('sep 21, 21 10:38:54');

D特:那這樣就開始來取得那些碎片吧,拿出容器

let fragmentsOfTime = {};

取得年份 --Date.prototype.getFullYear()

回傳值:四位數數字型別的整數(根據local time

let getYear = wantToGoDay.getFullYear();

//裝入裡面吧
let fragmentsOfTime = {};
fragmentsOfTime.year = getFullYear;
console.log(fragmentsOfTime)

getFullYear()延伸問題:Y2K (更新時間:24/15:35)
(感謝我的隊友們熱情分享
所謂Y2K問題:
一開始是軟體開發者沒有意識到會有這個問題,加上硬體成本過高,所以沿襲傳統就以2位數表達年份,但時間推進到2000年,程式的年份表達會遇到顯示00,但無法辨識背後代表的是1900年 or 2000年?
因此,隨著硬體的成本降低,漸漸轉用4數表達年份:顯示的內容從原本的00變成2000。但硬體的存放空間終究有限,究竟這樣4數的存放極限在哪?又為何是所謂的2038問題

    Math.pow(2,31);//得到32位元的值存放極限: 2147483648(s)(世界時間存放系統)
    //這樣我們還能存幾年?
    let totalTimeStorage = Math.pow(2,31)/86400(每日秒數)/365;
    //就能得到還能存放的時間長度:68
    //在文章中有介紹getFullYear(),最早會從1970開始
    //因此就比較能理解為何是2038災難
    

另一個取得年份的方式是Date.prototype.getYear()
但是MDN並不推薦使用這個methods,理由如下:

  1. 計算年份的方式
    let Xmas = new Date('dec 24, 1995 23:15:00');
    console.log(Xmas.getYear());

當我們使用getYear()時,它會將你的預設年份值 - 1900,以上面的案例,我們會得到1995-1900 = 95;
試想:當你輸入的年份早於1900年會怎樣呢?

2. 部分的瀏覽器已不支援

取得月份 --Date.prototype.getMonth()

回傳值:0-11間數字型別的整數(根據local time

let getMonth = wantToGoDay.getMonth();


fragmentsOfTime.date = getDate;
console.log(fragmentsOfTime)

取得日期 --Date.prototype.getDate()

回傳值:1-31間數字型別的整數(根據local time

let getDate = wantToGoDay.getDate()
consolle.log(getDate);

fragmentsOfTime.date = getDate;
console.log(fragmentsOfTime)

取得小時 --Date.prototype.getHours()

回傳值:0-23間數字型別的整數(根據local time

let getHours = wantToGoDay.getHours()
consolle.log(getHours);

fragmentsOfTime.hours = getHours;
console.log(fragmentsOfTime)

取得分鐘

回傳值:0-59間數字型別的整數(根據local time

let getMinutes = wantToGoDay.getMinutes()
consolle.log(getMinutes);

fragmentsOfTime.mintues = getMinutes;
console.log(fragmentsOfTime)

取得秒數

回傳值:0-59間數字型別的整數(根據local time

let getSeconds = wantToGoDay.getSeconds()
consolle.log(getSeconds);



fragmentsOfTime.seconds = getSeconds;
console.log(fragmentsOfTime)

D特:碎片湊齊了!!
(裝碎片容器發出巨光)
.....
...
:修蛋幾勒,怎麼沒有出去的感覺..?

-- to be continued --


那今天就到這邊摟!今天分享喜歡的歌是:
Sidney Bechet - Si tu vois ma mère
https://www.youtube.com/watch?v=HkdCr9HlRE0&list=PLevoGoxUkU1_HrNQhLKotpRUsPMc8CwHf&index=3

每天的休息,是為了後面的追求,明天見。

reference:

  1. https://pjchender.dev/javascript/js-date-time/
  2. https://medium.com/coding-hot-pot/javascript-date%E7%89%A9%E4%BB%B6-e63d80d8a180
  3. MDN-- Date
  4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

上一篇
追求JS小姊姊系列 Day8 -- 鄭列展現的工具力(下)
下一篇
追求JS小姊姊系列 Day10 -- 如果時間能重來,我不想跟工具人聊天(下)
系列文
追求JS小姊姊30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
Hooo
iT邦新手 4 級 ‧ 2021-09-24 13:53:24

原來 Date 可以自己設定時間

很正經的留言

1
Chiahsuan
iT邦新手 4 級 ‧ 2021-09-24 14:45:20

和Sherry一起長知識了~
Y2K

努力和你們一起長知識

我要留言

立即登入留言